<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标滑过图片时预览大图</title>

<style type="text/css">
 body{
     margin:0;
     padding:40px;
     background:#fff;
     font:80% Arial, Helvetica, sans-serif;
     color:#555;
     line-height:180%;
 }
 img{border:none;}
 ul,li{
     margin:0;
     padding:0;
 }
 li{
     list-style:none;
     float:left;
     display:inline;
     margin-right:10px;
     border:1px solid #AAAAAA;
 }

 /* tooltip */
 #tooltip{
     position: absolute;
     border: 1px solid #ccc;
     background: #333;
     padding: 2px;
     display: none;
     color: #fff;	
 }
</style>
<!-- 记得导入jquery文件! -->
<script>
 //训练要点
 //（1）掌握事件对象的应用
 //（2）会使用JQuery操作DOM
 
 //任务完成步骤及参考代码可以参照课本第9章任务10.2。
 //-----------------在此开始你的代码----------------


//-----------------在此结束你的代码----------------
</script>
</head>
<body>
<ul>
  <li><a href="images/012.jpg" class="tooltip" title="拉萨效外"><img src="images/011.jpg" alt="拉萨效外" /></a></li>
  <li><a href="images/022.jpg" class="tooltip" title="圣湖的传说"><img src="images/021.jpg" alt="圣湖的传说"/></a></li>
  <li><a href="images/032.jpg" class="tooltip" title="童话九寨沟"><img src="images/031.jpg" alt="童话九寨沟"/></a></li>
  <li><a href="images/042.jpg" class="tooltip" title="丹巴藏寨"><img src="images/041.jpg" alt="丹巴藏寨"/></a></li>
</ul>
</body>
</html>
